<!--
 @description：修改时间
 @author: Xg
 @date: 2021/6/30 17:55
-->
<template>
  <el-dialog
    :title="title"
    :visible.sync="updateTimeVisible"
    width="40%"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :before-close="closeDialog"
  >
    <!-- 修改时间 -->
    <el-form v-model="timeParams" class="user-search">
      <el-form-item label="原有时间">
        {{ this.oldTime }}
      </el-form-item>
      <el-form-item label="修改为当天">
        <el-time-picker
          v-model="newTime"
          style="width: 53%"
          placeholder="选择时间"
          format="HH:mm"
          @change="change"
        />
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="closeDialog()">取消</el-button>
      <el-button type="danger" @click="endNow">提前结束</el-button>
      <el-button type="primary" @click="updateTime">修改</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { updateTime, getEndTime, endNow } from '@/api/meal/task'

export default {
  name: 'UpdateTimeDialog',
  props: {
    updateTimeVisible: {
      type: Boolean,
      default: false
    },
    // 一行的数据row
    taskId: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      isRefresh: false,
      // 时间提交参数
      timeParams: {
        endTime: null,
        taskId: null
      },
      // 前端限制截止时间一定是今天以后
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7 || time.getTime() > Date.now() + 8.64e6
        }
      },
      // 原有时间
      oldTime: null,
      newTime: null,
      title: '修改时间'
    }
  },
  // 点击才获取参数，方法同详情页
  created() {
    if (this.taskId) {
      this.getEndTime()
    }
  },
  methods: {
    // 时间改变
    change() {
      this.timeParams.endTime = this.newTime
    },
    // 关闭页面
    closeDialog() {
      this.timeParams = null
      this.oldTime = null
      this.newTime = null
      // 修改时间后需要刷新页面
      this.$emit('close', true)
    },
    // 修改时间
    updateTime() {
      this.$confirm('确定修改吗?', '修改确认', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.timeParams.taskId = this.taskId
          updateTime(this.timeParams).then(res => {
            if (res.code === 200) {
              this.$message.success('修改成功！')
              this.closeDialog()
            }
          })
        })
    },
    // 提前结束
    endNow() {
      this.$confirm('确定现在结束吗?', '结束确认', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.timeParams.taskId = this.taskId
          this.timeParams.endTime = new Date()
          endNow({ taskId: this.taskId }).then(res => {
            if (res.code === 200) {
              this.$message.success('操作成功！')
              this.closeDialog()
            }
          })
        })
    },
    // 根据点餐码获取原有时间
    getEndTime() {
      getEndTime({ taskId: this.taskId }).then(res => {
        if (res.code === 200) {
          this.oldTime = res.data.endTime
          // this.oldTime = res.data.endTime.getDay() + '号 ' + res.data.endTime.getHours() + '时' + res.data.endTime.getMinutes() + '分'
        }
      })
    }
  }
}
</script>

<style scoped>
  .user-search {
    margin-left: 15%;
  }
</style>
